<template>
   <view class="wrap">
	   <view v-if="info.signPoem.length" class="bg" style="background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/randomDream/tagBg.png') no-repeat;
    background-size: 100% 100%; padding:30rpx;">
		<view class="title">{{ info.drawName }}</view>
		<view class="line"></view>
		<view class="contentWrap" style="width: auto; margin: 0;">
			<view class="showRandom">
				<view class="verse" v-for="(item,idx) in info.signPoem">{{item}}</view>
				<view class="verse" style="font-size: 14px; line-height: 140rpx;">{{info.drawTitle}}</view>
			</view>
			<view class="first">
				<view class="count">第</view>
				<view class="count" style="text-align: center;">{{info.signNumber}}</view>
				<view class="count">签</view>
			</view>
		</view>
		
	</view>
	  
	<view class="content">
		<view class="forContainer" v-for="(item,idx) in arr" :key="idx">
			<view class="containerInfo">
				<view class="left">【{{ item.name }}】</view>
				<view class="right">{{ item.context.join('') }}</view>
			</view>
		</view>
	</view>
	<view class="btn" @tap="question">咨询专家</view>
   </view>
</template>
<script>
import { lotsDetailsAPI } from '../../../utils/api';
export default {
  
   data() {
     return {
        info:{},
        arr:[]
     }
   },
   async onLoad(options){
        const res = await lotsDetailsAPI(options.id);
        console.log('res',res.result)
        this.info = res.result;
        this.arr = res.result.contexts;
   },
   methods: {
     question(){
		 const index = '3'
		     uni.reLaunch({
		      url: `../../../pages/tabbar/online/online?id=${index}`
		     })
	 }
   }
};
</script>
<style lang='less' scoped>
.btn{
	position: fixed;
	bottom: 30rpx;
	width: 690rpx;
	background-color: #FF7F22;
	color: #fff;
	border-radius: 8rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
}
.contentWrap{
	display: flex;
	justify-content: center;
}
.first{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 700;
	color: #452F17;
}
.showRandom{
	display: flex;
	align-items: center;
	color: #452F17;
	font-size: 20px;
	font-weight: 600;
}
.verse{
	writing-mode:vertical-lr;
	letter-spacing: 10px;
	line-height: 100rpx;
}
.title{
	padding-top: 30rpx;
	font-size: 26px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #893702;
	text-align: center;
}
.line{
    width: 100%;
    height: 1rpx;
    background: #893702;
    margin: 30rpx 0;
}
.content{
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 0rpx 0rpx;
	margin-bottom: 200rpx;
    .containerInfo{
        display: flex;
        .left{
            width: 168rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #893702;
        }
        .right{
            width: 408rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
			letter-spacing: 4rpx;
			line-height: 40rpx;
        }
    }
    
}
.wrap{
    padding: 30rpx;
    
}
</style>